<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加文章</title>
    <style>
        body{
            background-color:paleturquoise;
        }
        #upload{
            width: 120px;
            line-height: 40px;
            border-radius: 8px;
            border: 0;
            outline: none;
            background-color:#0b0825;
            color: #fff;
            cursor: pointer;
        }
        .tup{
          vertical-align: middle;
        }
        input{
            outline: none;
        }
        .add{
            width: 80px;
            line-height: 30px;
            border-radius: 8px;
            border: 0;
            outline: none;
            background-color:#0b0825;
            color: #fff;
            cursor: pointer;
        }
        textarea{
            border: 0;
            outline: 0;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">添加文章</h1>
    <form action="/insert" method="post" enctype="multipart/form-data">
        <div>
            标题：<input type="text" name="title" autocomplete="off">
        </div>
        <p>
            封面: <input type="file" name="img" id="img" autocomplete="off" style="display: none;"><button id="upload"><img class="tup" src="../static/images/Snipaste_2021-08-07_09-51-50.jpg">上传图片</button>
        </p>
        <div id="imgWrap" style="display: none;">
            预览：
            <img src="" id="preview" width="150px">
        </div>
        <div>
            作者: <input type="text" name="author" autocomplete="off">
        </div>
        <div>
            审核：
            <input type="radio" name="status" value='0' checked> 已发布
            <input type="radio" name="status" value='1'> 未发布
            <input type="radio" name="status" value='2'> 审核中
        </div>
        <div>
            所属分类：
            <select name="cat_id">
                <option value="0">请选择</option>
                {{each cats item }}
                <option value="{{item.cate_id}}">{{item.cate_name}}</option>
                {{/each}}
            </select>
        </div>
        <div>
            内容：
            <textarea name="content" id="" cols="30" rows="10"></textarea>
        </div>
        <div>
            <button class="add">添加</button>
        </div>
    </form>
</body>
<!-- <script src="/static/js/add.js"></script> -->
<script>
    let Upload = document.getElementById('upload');
let imgEle = document.getElementById('img');
Upload.onclick = function(event){
    imgEle.click();
    // return false;
    event.preventDefault();
}
imgEle.onchange = function () {
    let file = this.files[0]
    // 判断上传文件，没有上传就退出
    if (!file) {
        return
    }
    let fileReader = new FileReader()
    fileReader.readAsDataURL(file)
    fileReader.onload = function (e) {
        document.getElementById('preview').src = this.result;
        document.getElementById('imgWrap').style.display = '';
    }
}
</script>
</html>